<template>
    <div>
        <el-table :data="data.items" v-loading="loading">
            <slot/>
        </el-table>

        <div style="margin-top: 20px">
            
            <el-pagination :current-page="query.page"
                           :page-size="query.limit"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="data.total"
                           @size-change="onSizeChange"
            />
        </div>
    </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator';
import { KTableQuery, KTableState } from './state';

@Component({ name: 'KTable' })
export default class Page extends Vue {
    @Prop({ type: Function }) readonly load!: (state: KTableQuery) => Promise<any>;

    loading: boolean = true;
    query: KTableQuery = {
        page: 1,
        limit: 10,
    };

    data: any = {
        items: [],
        total: 0
    };

    request() {
        this.loading = true;
        return this.load(this.query)
            .finally(() => {
                this.loading = false;
            })
            .then(result => {
                this.data.items = result.items;
                this.data.total = result.total;
                console.log('res', this.data)
            })
    }

    mounted() {
        // { page: this.page, limit: this.limit }
        this.request();
    }

    onSizeChange(size: number) {
        this.$set(this.query, 'page', 1);
        this.$set(this.query, 'limit', size);
        this.request();
    }
}
</script>
